<template>
  <el-row>
    <div class="section-input">
      <el-radio-group v-model="sel">
        <div :class="question.style==='v'?'vbox':'box'">
          <section v-for="option in question.options" :key="option.key" >
            <el-radio :label="option.text" :checked="option.checked" class="radio-box">
              <view-options :option="option" ></view-options>
            </el-radio>
          </section>
        </div>
      </el-radio-group>
      <!--<el-radio-group v-model="sel">-->
        <!--<div v-if="question.style==='v'">-->
          <!--<section v-for="option in question.options" :key="option.key" style="border: 1px solid blue">-->
            <!--<el-radio :label="option.text" :checked="option.checked">-->
              <!--<view-options :option="option"></view-options>-->
            <!--</el-radio>-->
          <!--</section>-->
        <!--</div>-->
        <!--<div v-else>-->
          <!--<section v-for="option in question.options" :key="option.key" style="float:left;border: 1px solid blue;">-->
            <!--<el-radio :label="option.text" :checked="option.checked">-->
              <!--<view-options :option="option"></view-options>-->
            <!--</el-radio>-->
          <!--</section>-->
        <!--</div>-->
      <!--</el-radio-group>-->
    </div>
  </el-row>
</template>

<script>
  import viewOptions from './viewOptions'

  export default {
    name: "view-i-radio",
    props: ['question'],
    components:{viewOptions},
    data() {
      return {
        sel:null
      }
    },
    created(){
      console.log('这里是啥------',this.question)
    },
    methods: {}
  }
</script>

<style scoped>
  .box{
    border: 0px solid blue;
    display: flex;
    flex-direction: row;
  }
  .radio-box{
    border: 0px solid orangered;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 15px;
  }
</style>
